<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-07-29 11:48:11
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-07-29 16:23:25
 * @FilePath: \hy-ui\src\views\otherPages\architectureDiagram\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="padding:20px">
        <div style="display: flex">
      <el-button type="warning" @click="toImage">导出</el-button>
      <el-button type="primary" @click="handleIsAll">{{
        !collapsable ? "折叠全部" : "展开全部"
      }}</el-button>
    </div>
    <div class="orgTree">
    <vue2-org-tree
      :data="data"
      :collapsable="collapsable"
      @on-expand="onExpand"
      :renderContent="renderContent"
      :label-class-name="labelClassName"
      ref="orgTreeRef"
    />
  </div>
  </div>
</template>

<script>
import { getDeptTreeCount } from "@/api/system/dept";
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      data: {},
      labelClassName: "bg-color-orange",
      collapsable: false,
    };
  },
  methods: {
    handleIsAll() {
      this.collapsable = !this.collapsable;
    },
    toImage() {
      if (this.collapsable) {
        this.collapsable = false;
      }
      const dom = this.$refs.orgTreeRef.$el?.children?.[0];
      if (dom instanceof HTMLElement) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        setTimeout(() => {
          html2canvas(dom, {
            width: this.$refs.orgTreeRef?.$el.children?.[0].offsetWidth + 500,
            height: this.$refs.orgTreeRef?.$el.children?.[0].offsetHeight + 500,
            backgroundColor: "white",
          }).then((canvas) => {
            let url = canvas.toDataURL("image/png");
            this.downloadBase64(url, "组织结构图");
            loading.close();
          });
        }, 100);
      }
    },
    downloadBase64(originURL, name) {
      const a = document.createElement("a");
      a.href = originURL;
      a.download = name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    async getData() {
      const res = await getDeptTreeCount();
      this.data = res.data?.[0];
      const _this = this;
      this.$nextTick(() => {
        const width1 = _this.$refs.orgTreeRef?.$el?.offsetWidth;
        const width2 = _this.$refs.orgTreeRef?.$el.children?.[0].offsetWidth;
        if (width1 < width2) {
          _this.collapsable = true;
          _this.$set(_this.data, "expand", true);
        } else {
          _this.collapsable = false;
        }
      });
    },
    renderContent(h, data) {
      return (
        <div class="content_div">
          <div class="title" style="font-size:14px">
            {data.label}
            <span style="margin-left:5px">（{data.weight}）</span>
          </div>
        </div>
      );
    },

    collapse(list) {
      var _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.orgTree {
  display: flex;
  justify-content: center;
  align-items: flex-start;
 margin-top: 20px;
}
.org-tree-container {
  width: 100%;
  overflow-y: scroll;
  min-height: 85vh;
}
::v-deep .org-tree {
  margin: 0 auto;
}
::v-deep .bg-color-orange {
  color: red !important;
}
::v-deep .org-tree-node-label {
  border: 2px solid #009dff;
  border-radius: 5px;
}
::v-deep .org-tree-node:after {
  border-left: 1px solid #009dff;
}
::v-deep .org-tree-node:not(:first-child):before,
::v-deep .org-tree-node:not(:last-child):after {
  border-top: 1px solid #009dff;
}
::v-deep .org-tree > .org-tree-node:after {
  border-left: 0;
}
::v-deep .org-tree-node-children:before {
  border-left: 1px solid #009dff;
}
::v-deep .org-tree-node-btn {
  border: 1px solid #009dff;
}
::v-deep .org-tree-node-btn:before {
  border-top: 1px solid #009dff;
}
::v-deep .org-tree-node-btn:after {
  border-left: 1px solid #009dff;
}
::v-deep .org-tree-node-btn.expanded:after {
  border: none;
}
::v-deep .collapsable .org-tree-node.collapsed .org-tree-node-label:after {
  border-right: 1px solid #009dff;
}
</style>